<template>
    <el-dialog
            :visible.sync="dialogVisible"
            width="500px"
            :before-close="closeDialog"
            append-to-body
            title="添加代理用户"
    >
        <el-form  :label-position="labelPosition"  label-width="70px" ref="form" :model="form"  v-loading="loading">
          <el-form-item prop="title" label="代理用户">
            <el-select v-model="form.agentUserAccount"
                       filterable
                       remote
                       reserve-keyword
                       :remote-method="queryAccounts"
                       placeholder="请输入"
                       size= "small"
                       :loading="userAccountSelect.loading">
              <el-option
                  v-for="item in userAccountSelect.options"
                  :key="item.userAccount"
                  :label="item.username"
                  :value="item.userAccount">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="content" label="代理时间">
            <el-date-picker
                v-model="form.agentTime"
                type="daterange"
                size="small"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="content" label="代理理由">
            <el-input size= "small" type="textarea"  v-model="form.reason"></el-input>
          </el-form-item>
        </el-form>
        <div class="btn-group">
            <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
            <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
        </div>

    </el-dialog>
    
</template>

<script>

import {formatDate} from "@/utils/DateUtils";
    import {addAgentVo} from '@/api/userAgent'
    import {queryUserList} from '@/api/user'
    export default {
        components:{
        },
        data(){
            return {
                labelPosition:'right',
                dialogVisible: false,
                loading: false,
                form: {
                    agentUserAccount:"",
                    agentStartTime:"",
                    agentEndTime:"",
                    reason:"",
                    agentTime:"",
                },
                userAccountSelect:{
                  options:[],
                  loading:false

                },
            }
        },
        created(){
           
        },
        methods:{
            async queryAccounts(query){
              if (query !== '') {
                this.userAccountSelect.loading = true;
                let res = await queryUserList({key:query});
                this.userAccountSelect.options = res.data;
                this.userAccountSelect.loading = false;
              } else {
                this.userAccountSelect.options = [];
              }
            },
            showDialog(){
                this.dialogVisible = true
            },
            closeDialog(){
                this.form = {
                  agentUserAccount:"",
                  agentStartTime:"",
                  agentEndTime:"",
                  reason:""
                };
                this.dialogVisible = false
                this.loading = false
            },
            selectRoleBack(roleCode){
                this.form.roleCode = roleCode;
            },
            submit(){
              this.$refs.form.validate(async valid => {
                  if(valid){
                      try{
                          this.loading = true
                          if(this.form.agentTime == null || this.form.agentTime.length === 0){
                            this.$message.error('请选择代理时间')
                            return;
                          }
                          this.form.agentStartTime = formatDate(this.form.agentTime[0]);
                          this.form.agentEndTime = formatDate(this.form.agentTime[1]);
                          let res = await addAgentVo(this.form);
                          if(res.status === '200'){
                              this.$message.success('添加成功')
                              this.closeDialog()
                              this.$emit('success')
                          }else{
                              this.$message.error(res.msg)
                              this.loading = false
                          }
                      }catch{
                          this.loading = false
                      }
                  }
              });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .btn-group{
        display: flex;
        justify-content: right;
        .el-button{
            width: 50px;
        }
    }
    .el-form-item{
        height: 40px;
    }
</style>